<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AI 翻译助手</title>
  <style>
    body {
      width: 320px;
      padding: 20px;
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    .container {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    h2 {
      margin: 0;
      font-size: 20px;
      color: #2c3e50;
      font-weight: bold;
    }
    .settings {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background: #f5f5f5;
      padding: 16px;
      border-radius: 8px;
    }
    .input-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
    }
    .input-group label {
      font-size: 14px;
      color: #666;
    }
    input {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      transition: border-color 0.2s;
    }

    input:focus {
      border-color: #ff4d8c;
      outline: none;
    }

    button {
      background: #ff4d8c;
      color: white;
      border: none;
      padding: 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: background 0.2s;
    }
    button:hover {
      background: #ff3377;
    }

    .subtitle {
      font-size: 14px;
      color: #7f8c8d;
      margin-top: 4px;
      line-height: 1.5;
    }
    .toast {
      position: fixed;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%) translateY(100%);
      background: rgba(51, 51, 51, 0.9);
      color: white;
      padding: 12px 24px;
      border-radius: 4px;
      font-size: 14px;
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 1000;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    .toggle-password {
      position: absolute;
      right: 8px;
      bottom: 8px;
      background: none;
      border: none;
      color: #666;
      padding: 4px;
      cursor: pointer;
      font-size: 16px;
    }

    .toggle-password:hover {
      color: #ff4d8c;
    }

    /* 修改全局密码显示切换按钮样式 */
    .global-toggle-password {
      position: relative;
      width: 40px;
      height: 20px;
      background: #e0e0e0;
      border-radius: 10px;
      padding: 2px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .password-hidden {
    /* 密码隐藏状态的样式 */
    background-image: url('eye-slash.svg');
    }

    .password-visible {
    /* 密码显示状态的样式 */
    background-image: url('eye.svg');
    }
    
    .global-toggle-password::before {
      content: "";
      width: 16px;
      height: 16px;
      background: white;
      border-radius: 50%;
      transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .global-toggle-password.unlocked {
      background: #ff4d8c;
      justify-content: flex-end;
    }

    .global-toggle-password:hover {
      opacity: 0.9;
    }

    .global-toggle-password.unlocked::before {
      transform: translateX(0);
    }

    .global-toggle-password:not(.unlocked)::before {
      transform: translateX(0);
    }

    .password-control {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      margin-bottom: 4px;
      margin-top: 4px;
    }

    .password-label {
      font-size: 14px;
      color: #666;
    }

    .header {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .header img {
      width: 48px;
      height: 48px;
    }

    /* 添加新的服务开关样式 */
    .service-switch {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
    }
    
    .switch {
      position: relative;
      width: 40px;
      height: 20px;
      background: #e0e0e0;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .switch::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      left: 0;
      top: 0;
      transition: transform 0.3s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .switch.active {
      background: #ff4d8c;
    }

    .switch.active::before {
      transform: translateX(20px);
    }

    .service-section {
      border-bottom: 1px solid #eee;
      padding-bottom: 16px;
      margin-bottom: 16px;
    }

    .service-section:last-child {
      border-bottom: none;
      padding-bottom: 0;
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <img src="images/icon48.png" alt="AI工具箱">
      <div>
        <h2>AI 工具箱</h2>
        <div class="subtitle">支持腾讯云翻译与智谱轻言 AI</div>
      </div>
    </div>

    <div class="password-control">
      <span class="password-label">显示/隐藏密钥</span>
      <div class="switch" id="togglePassword"></div>
    </div>

    <div class="settings">
      <!-- 腾讯云配置部分 -->
      <div class="service-section">
        <div class="service-switch">
          <span>腾讯云翻译</span>
          <div class="switch" id="tencentSwitch"></div>
        </div>
        <div class="input-group">
          <label>SecretId</label>
          <input type="password" id="tencentSecretId" placeholder="请输入腾讯云 SecretId">
        </div>
        <div class="input-group">
          <label>SecretKey</label>
          <input type="password" id="tencentSecretKey" placeholder="请输入腾讯云 SecretKey">
        </div>
      </div>

      <!-- 智谱轻言配置部分 -->
      <div class="service-section">
        <div class="service-switch">
          <span>智谱轻言</span>
          <div class="switch" id="chatglmSwitch"></div>
        </div>
        <div class="input-group">
          <label>API Key</label>
          <input type="password" id="chatglmApiKey" placeholder="请输入智谱轻言 API Key">
        </div>
        <div class="input-group">
          <label>API Secret</label>
          <input type="password" id="chatglmApiSecret" placeholder="请输入智谱轻言 API Secret">
        </div>
        <div class="input-group">
          <label>Assistant ID</label>
          <input type="text" id="assistantId" placeholder="请输入智谱轻言 Assistant ID">
        </div>
      </div>

      <button id="saveSettings">保存设置</button>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html> 